<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

    <%@ page contentType="text/html;charset=UTF-8" language="java"  isELIgnored="false"%>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>爱心志愿者平台 - 个人中心</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#1E88E5', // 主色调：蓝色，代表信任和专业
                        secondary: '#388E3C', // 辅助色：绿色，代表生命和希望
                        accent: '#FF9800', // 强调色：橙色，代表活力和温暖
                        neutral: {
                            100: '#F5F7FA',
                            200: '#E4E7ED',
                            300: '#C0C6CF',
                            400: '#909399',
                            500: '#606266',
                            600: '#303133',
                        }
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 4px 12px rgba(0, 0, 0, 0.05)',
                        'card-hover': '0 8px 24px rgba(0, 0, 0, 0.12)',
                    }
                },
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }
            .transition-custom {
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
        }
    </style>
</head>
<body class="font-inter bg-neutral-100 text-neutral-600 min-h-screen flex flex-col">
<!-- 顶部导航栏 -->
<header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300" id="navbar">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center h-16">
            <!-- Logo -->
            <div class="flex items-center">
                <a href="#" class="flex items-center">
                    <i class="fa fa-heart-o text-primary text-2xl mr-2"></i>
                    <span class="text-xl font-bold text-primary">爱心志愿者平台</span>
                </a>
            </div>

            <!-- 主导航 -->
            <nav class="hidden md:flex space-x-8">
                <a href="/activities/home" class="text-primary font-medium hover:text-primary/80 transition-custom border-b-2 border-primary">首页</a>
                <a href="#" class="text-neutral-500 font-medium hover:text-primary transition-custom">项目中心</a>
                <a href="/activities/list" class="text-neutral-500 font-medium hover:text-primary transition-custom">活动报名</a>
                <a href="#" class="text-neutral-500 font-medium hover:text-primary transition-custom">志愿服务时长</a>
                <a href="/registration/list" class="text-neutral-500 font-medium hover:text-primary transition-custom">我的活动</a>
            </nav>

            <!-- 用户信息和操作 -->
            <div class="flex items-center space-x-4">
                <div class="relative">
                    <button class="flex items-center text-neutral-500 hover:text-primary transition-custom" id="notificationBtn">
                        <i class="fa fa-bell-o text-xl"></i>
                        <span class="absolute -top-1 -right-1 bg-accent text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">3</span>
                    </button>
                </div>

                <div class="relative group">
                    <button class="flex items-center space-x-2 focus:outline-none" id="userMenuBtn">
                        <img src="${pageContext.request.contextPath}/${volunteerInfo.avatar != null ? volunteerInfo.avatar : 'static/images/default-avatar.png'}" alt="用户头像" class="h-8 w-8 rounded-full object-cover border-2 border-primary">
                        <span class="hidden md:block text-sm font-medium">${volunteerInfo.name}</span>
                        <i class="fa fa-angle-down text-neutral-400 group-hover:text-primary transition-custom"></i>
                    </button>

                    <!-- 用户下拉菜单 -->
                    <div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50 transform origin-top-right scale-95 group-hover:scale-100">
                        <a href="/users/profile" class="block px-4 py-2 text-sm text-neutral-600 hover:bg-primary hover:text-white transition-custom">
                            <i class="fa fa-user-o mr-2"></i>个人资料
                        </a>
                        <a href="#" class="block px-4 py-2 text-sm text-neutral-600 hover:bg-primary hover:text-white transition-custom">
                            <i class="fa fa-cog mr-2"></i>账号设置
                        </a>
                        <a href="#" class="block px-4 py-2 text-sm text-neutral-600 hover:bg-primary hover:text-white transition-custom">
                            <i class="fa fa-question-circle-o mr-2"></i>帮助中心
                        </a>
                        <div class="border-t border-neutral-200 my-1"></div>
                        <a href="#" class="block px-4 py-2 text-sm text-red-500 hover:bg-red-50 transition-custom">
                            <i class="fa fa-sign-out mr-2"></i>退出登录
                        </a>
                    </div>
                </div>

                <!-- 移动端菜单按钮 -->
                <button type="button" class="md:hidden text-neutral-500 hover:text-primary focus:outline-none" id="mobileMenuBtn">
                    <i class="fa fa-bars text-xl"></i>
                </button>
            </div>
        </div>
    </div>

<%--    <!-- 移动端菜单 -->--%>
<%--    <div class="md:hidden hidden transition-all duration-300 ease-in-out" id="mobileMenu">--%>
<%--        <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white shadow-lg">--%>
<%--            <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-primary bg-primary/10">首页</a>--%>
<%--            <a href="/activities/list.jsp" class="block px-3 py-2 rounded-md text-base font-medium text-neutral-600 hover:bg-primary/10 hover:text-primary">项目中心</a>--%>
<%--            <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-neutral-600 hover:bg-primary/10 hover:text-primary">活动报名</a>--%>
<%--            <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-neutral-600 hover:bg-primary/10 hover:text-primary">志愿服务时长</a>--%>
<%--            <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-neutral-600 hover:bg-primary/10 hover:text-primary">公益圈</a>--%>
<%--        </div>--%>
<%--    </div>--%>
</header>


<!-- 推荐活动 -->
<table>
    <c:forEach items="${activities}" var="activity" varStatus="status">
        <c:if test="${status.index % 3 == 0}">
            <tr>
        </c:if>
        <td>
            <img src="${activity.coverImage}" width="500" height="200">
            <h3>${activity.title}</h3>
            <a href="/registration/enroll?activityId=${activity.activityId}">
                <button>立即报名</button>
            </a>
        </td>
        <c:if test="${status.index % 3 == 2}">
            </tr>
        </c:if>
    </c:forEach>
</table>

<%--    <!-- 志愿者社区 -->--%>
<%--    <section class="py-10 bg-white">--%>
<%--        <div class="container mx-auto px-4 sm:px-6 lg:px-8">--%>
<%--            <div class="flex flex-col md:flex-row md:items-center justify-between mb-8">--%>
<%--                <h2 class="text-2xl font-bold text-neutral-600">志愿者社区动态</h2>--%>
<%--                <a href="#" class="text-primary hover:text-primary/80 font-medium flex items-center transition-custom">--%>
<%--                    进入社区 <i class="fa fa-angle-right ml-1"></i>--%>
<%--                </a>--%>
<%--            </div>--%>

<%--            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">--%>
<%--                <!-- 动态卡片 1 -->--%>
<%--                <div class="bg-white rounded-xl shadow-card p-6 border border-neutral-200 hover:border-primary/30 transition-custom">--%>
<%--                    <div class="flex items-start">--%>
<%--                        <img src="https://picsum.photos/seed/user456/50/50" alt="用户头像" class="h-12 w-12 rounded-full object-cover">--%>
<%--                        <div class="ml-4 flex-1">--%>
<%--                            <div class="flex items-center justify-between">--%>
<%--                                <h3 class="text-sm font-medium text-neutral-600">李四</h3>--%>
<%--                                <span class="text-xs text-neutral-400">2小时前</span>--%>
<%--                            </div>--%>
<%--                            <p class="mt-2 text-sm text-neutral-600">--%>
<%--                                今天参加了"城市绿化维护项目"的植树活动，虽然很累但很有意义！看到自己种的小树苗，心里充满了成就感。希望更多的人加入我们，一起为城市添绿！--%>
<%--                            </p>--%>
<%--                            <div class="mt-3 flex space-x-2">--%>
<%--                                <img src="https://picsum.photos/seed/post1/100/100" alt="活动照片" class="h-20 w-20 object-cover rounded">--%>
<%--                                <img src="https://picsum.photos/seed/post2/100/100" alt="活动照片" class="h-20 w-20 object-cover rounded">--%>
<%--                                <img src="https://picsum.photos/seed/post3/100/100" alt="活动照片" class="h-20 w-20 object-cover rounded">--%>
<%--                            </div>--%>
<%--                            <div class="mt-4 flex items-center justify-between">--%>
<%--                                <div class="flex space-x-4">--%>
<%--                                    <button class="flex items-center text-neutral-400 hover:text-primary transition-custom">--%>
<%--                                        <i class="fa fa-thumbs-o-up mr-1"></i>--%>
<%--                                        <span class="text-sm">32</span>--%>
<%--                                    </button>--%>
<%--                                    <button class="flex items-center text-neutral-400 hover:text-primary transition-custom">--%>
<%--                                        <i class="fa fa-comment-o mr-1"></i>--%>
<%--                                        <span class="text-sm">8</span>--%>
<%--                                    </button>--%>
<%--                                </div>--%>
<%--                                <button class="text-neutral-400 hover:text-primary transition-custom">--%>
<%--                                    <i class="fa fa-share-alt"></i>--%>
<%--                                </button>--%>
<%--                            </div>--%>
<%--                        </div>--%>
<%--                    </div>--%>
<%--                </div>--%>

<%--                <!-- 动态卡片 2 -->--%>
<%--                <div class="bg-white rounded-xl shadow-card p-6 border border-neutral-200 hover:border-primary/30 transition-custom">--%>
<%--                    <div class="flex items-start">--%>
<%--                        <img src="https://picsum.photos/seed/user789/50/50" alt="用户头像" class="h-12 w-12 rounded-full object-cover">--%>
<%--                        <div class="ml-4 flex-1">--%>
<%--                            <div class="flex items-center justify-between">--%>
<%--                                <h3 class="text-sm font-medium text-neutral-600">王五</h3>--%>
<%--                                <span class="text-xs text-neutral-400">昨天</span>--%>
<%--                            </div>--%>
<%--                            <p class="mt-2 text-sm text-neutral-600">--%>
<%--                                分享一个好消息，我们团队组织的"山区儿童图书捐赠活动"已经募集到了超过500本图书，下周将启程前往山区学校，把这些爱心图书送到孩子们手中！--%>
<%--                            </p>--%>
<%--                            <div class="mt-3">--%>
<%--                                <div class="bg-neutral-50 rounded-lg p-4">--%>
<%--                                    <div class="flex items-center">--%>
<%--                                        <div class="h-10 w-10 rounded-full bg-accent/10 flex items-center justify-center mr-3">--%>
<%--                                            <i class="fa fa-calendar-check-o text-accent"></i>--%>
<%--                                        </div>--%>
<%--                                        <div>--%>
<%--                                            <h4 class="text-sm font-medium text-neutral-600">山区儿童图书捐赠活动</h4>--%>
<%--                                            <p class="text-xs text-neutral-400">6月28日 09:00-16:00 · 广州市天河区</p>--%>
<%--                                        </div>--%>
<%--                                    </div>--%>
<%--                                </div>--%>
<%--                            </div>--%>
<%--                            <div class="mt-4 flex items-center justify-between">--%>
<%--                                <div class="flex space-x-4">--%>
<%--                                    <button class="flex items-center text-neutral-400 hover:text-primary transition-custom">--%>
<%--                                        <i class="fa fa-thumbs-o-up mr-1"></i>--%>
<%--                                        <span class="text-sm">45</span>--%>
<%--                                    </button>--%>
<%--                                    <button class="flex items-center text-neutral-400 hover:text-primary transition-custom">--%>
<%--                                        <i class="fa fa-comment-o mr-1"></i>--%>
<%--                                        <span class="text-sm">12</span>--%>
<%--                                    </button>--%>
<%--                                </div>--%>
<%--                                <button class="text-neutral-400 hover:text-primary transition-custom">--%>
<%--                                    <i class="fa fa-share-alt"></i>--%>
<%--                                </button>--%>
<%--                            </div>--%>
<%--                        </div>--%>
<%--                    </div>--%>
<%--                </div>--%>
<%--            </div>--%>
<%--        </div>--%>
<%--    </section>--%>
<%--</main>--%>

<!-- 页脚 -->
<footer class="bg-neutral-800 text-white py-12">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div>
                <div class="flex items-center mb-4">
                    <i class="fa fa-heart-o text-primary text-2xl mr-2"></i>
                    <span class="text-xl font-bold">爱心志愿者平台</span>
                </div>
                <p class="text-neutral-400 text-sm mb-4">
                    爱心志愿者平台是一个贵州性的志愿者服务平台，致力于为志愿者和志愿组织提供便捷、高效的服务对接。
                </p>
                <div class="flex space-x-4">
                    <a href="#" class="text-neutral-400 hover:text-primary transition-custom">
                        <i class="fa fa-weibo text-lg"></i>
                    </a>
                    <a href="#" class="text-neutral-400 hover:text-primary transition-custom">
                        <i class="fa fa-wechat text-lg"></i>
                    </a>
                    <a href="#" class="text-neutral-400 hover:text-primary transition-custom">
                        <i class="fa fa-qq text-lg"></i>
                    </a>
                </div>
            </div>

            <div>
                <h3 class="text-lg font-medium mb-4">志愿者服务</h3>
                <ul class="space-y-2 text-neutral-400">
                    <li><a href="#" class="hover:text-primary transition-custom">我要报名</a></li>
                    <li><a href="#" class="hover:text-primary transition-custom">服务项目</a></li>
                    <li><a href="#" class="hover:text-primary transition-custom">服务时长</a></li>
                    <li><a href="#" class="hover:text-primary transition-custom">志愿者培训</a></li>
                    <li><a href="#" class="hover:text-primary transition-custom">志愿者保险</a></li>
                </ul>
            </div>

            <div>
                <h3 class="text-lg font-medium mb-4">关于我们</h3>
                <ul class="space-y-2 text-neutral-400">
                    <li><a href="#" class="hover:text-primary transition-custom">平台介绍</a></li>
                    <li><a href="#" class="hover:text-primary transition-custom">新闻公告</a></li>
                    <li><a href="#" class="hover:text-primary transition-custom">联系我们</a></li>
                    <li><a href="#" class="hover:text-primary transition-custom">常见问题</a></li>
                    <li><a href="#" class="hover:text-primary transition-custom">意见反馈</a></li>
                </ul>
            </div>

            <div>
                <h3 class="text-lg font-medium mb-4">联系我们</h3>
                <ul class="space-y-2 text-neutral-400">
                    <li class="flex items-center">
                        <i class="fa fa-map-marker w-5 text-primary"></i>
                        <span>620志愿中心</span>
                    </li>
                    <li class="flex items-center">
                        <i class="fa fa-phone w-5 text-primary"></i>
                        <span>400-123-4567</span>
                    </li>
                    <li class="flex items-center">
                        <i class="fa fa-envelope-o w-5 text-primary"></i>
                        <span>service@volunteer.org.cn</span>
                    </li>
                    <li class="flex items-center">
                        <i class="fa fa-clock-o w-5 text-primary"></i>
                        <span>周一至周日 9:00-18:00</span>
                    </li>
                </ul>
            </div>
        </div>

        <div class="border-t border-neutral-700 mt-8 pt-8 text-center text-neutral-400 text-sm">
            <p>© 2025 爱心志愿者平台 版权所有 | 京ICP备12345678号</p>
        </div>
    </div>
</footer>

<!-- JavaScript -->
<script>
    // 导航栏滚动效果
    window.addEventListener('scroll', function() {
        const navbar = document.getElementById('navbar');
        if (window.scrollY > 50) {
            navbar.classList.add('shadow-md');
            navbar.classList.add('bg-white/95');
            navbar.classList.add('backdrop-blur-sm');
        } else {
            navbar.classList.remove('shadow-md');
            navbar.classList.remove('bg-white/95');
            navbar.classList.remove('backdrop-blur-sm');
        }
    });

    // 移动端菜单切换
    document.getElementById('mobile-menu-button').addEventListener('click', function() {
        const mobileMenu = document.getElementById('mobile-menu');
        mobileMenu.classList.toggle('hidden');
    });

    // 获取当前用户信息
    window.addEventListener('DOMContentLoaded', function() {
        fetch('/users/getCurrentUser')
            .then(response => response.json())
            .then(volunteerInfo => {
                if (volunteerInfo) {
                    // 构建正确的头像路径
                    let avatarPath = volunteerInfo.avatar 
                        ? '${pageContext.request.contextPath}/' + volunteerInfo.avatar 
                        : '${pageContext.request.contextPath}/static/images/default-avatar.png';
                    
                    // 更新用户菜单按钮
                    document.getElementById('userMenuBtn').innerHTML = `
                        <img src="\${avatarPath}" alt="用户头像" class="h-8 w-8 rounded-full object-cover border-2 border-primary">
                        <span class="hidden md:block text-sm font-medium">\${volunteerInfo.name}</span>
                        <i class="fa fa-angle-down text-neutral-400 group-hover:text-primary transition-custom"></i>
                    `;
                }
            })
            .catch(error => console.error('获取用户信息失败:', error));
    });

    // 图表初始化
    window.addEventListener('DOMContentLoaded', function() {
        const ctx = document.getElementById('serviceHoursChart').getContext('2d');

        const serviceHoursChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
                datasets: [{
                    label: '服务时长（小时）',
                    data: [15, 22, 30, 35, 45, 58],
                    borderColor: '#1E88E5',
                    backgroundColor: 'rgba(30, 136, 229, 0.1)',
                    tension: 0.3,
                    fill: true,
                    pointBackgroundColor: '#FFFFFF',
                    pointBorderColor: '#1E88E5',
                    pointBorderWidth: 2,
                    pointRadius: 4,
                    pointHoverRadius: 6
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        backgroundColor: 'rgba(0, 0, 0, 0.7)',
                        padding: 12,
                        titleFont: {
                            size: 14,
                            weight: 'bold'
                        },
                        bodyFont: {
                            size: 13
                        },
                        displayColors: false,
                        callbacks: {
                            label: function(context) {
                                return `${context.raw} 小时`;
                            }
                        }
                    }
                },
                scales: {
                    x: {
                        grid: {
                            display: false
                        },
                        ticks: {
                            color: '#606266'
                        }
                    },
                    y: {
                        beginAtZero: true,
                        grid: {
                            color: 'rgba(0, 0, 0, 0.05)'
                        },
                        ticks: {
                            color: '#606266',
                            callback: function(value) {
                                return value + 'h';
                            }
                        }
                    }
                },
                interaction: {
                    intersect: false,
                    mode: 'index'
                },
                elements: {
                    line: {
                        borderWidth: 3
                    }
                }
            }
        });
    });

    // 平滑滚动
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();

            document.querySelector(this.getAttribute('href')).scrollIntoView({
                behavior: 'smooth'
            });
        });
    });
</script>